<template>
    <div class="form">
        <section class="body">
            <p class="hedd-text">收款人与患者关系</p>
            <div class="promise">
                <van-tabs type="card" v-model="activeName" v-if="!disabled">
                    <van-tab title="患者本人" name="self"></van-tab>
                    <van-tab title="患者配偶" name="mate"></van-tab>
                    <van-tab title="直系亲属" name="kinsfolk"></van-tab>
                </van-tabs>
                <p class="text" v-if="!disabled">若患者本人超过18周岁，建议本人作为收款人，操作更简单，不用提交关系证明，通过率更高</p>
                <div class="mb20">
                    <van-field
                        v-model="activeName"
                        v-if="disabled"
                        disabled
                        required
                        label="与患者关系"
                        placeholder="请输入与患者关系"
                        maxlength="6"
                    />
                </div>
                <div class="mb20">
                    <van-field
                        v-model="name"
                        required
                        :disabled="disabled"
                        label="收款人姓名"
                        placeholder="请输入收款人姓名"
                        maxlength="6"
                    />
                </div>
                <div class="mb20">
                    <van-field v-model="id" :disabled="disabled" required label="身份证号" placeholder="请输入收款人身份证号" />
                </div>
                <p class="hedd-text">收款人银行卡信息</p>
                <div class="mb20">
                    <van-field v-model="bank" :disabled="disabled" required label="银行卡号" placeholder="请正确输入银行卡号" />
                </div>
                <div class="mb20" v-if="disabled">
                    <van-field v-model="banktype" :disabled="disabled" required label="开户银行" placeholder="请正确输入银行卡号" />
                </div>
                <div class="mb20" v-else>
                    <van-cell
                        title="开户银行"
                        is-link
                        arrow-direction="down"
                        :value="banktype"
                        @click="showPicker = true"
                    />
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker
                            show-toolbar
                            :columns="columns"
                            @cancel="showPicker = false"
                            @confirm="onConfirm"
                        />
                    </van-popup>
                </div>
                <div class="mb20">
                    <van-field v-model="bankOpenSub" :disabled="disabled" required label="支行名称" placeholder="请正确输入支行名称" />
                </div>
                <div class="mb20">
                    <van-field v-model="phone" :disabled="disabled" required label="联系方式" placeholder="请输入收款人联系方式" />
                </div>
                <p class="hedd-text">收款人身份材料</p>
                <div class="promise promiseDetail" v-if="disabled">
                    <h4>收款人身份证照片</h4>
                    <van-image
                        :src="'http://user-prepare.oss-cn-beijing.aliyuncs.com/' + bank_usercardpic"
                        @click.native="imgshow('http://user-prepare.oss-cn-beijing.aliyuncs.com/' + bank_usercardpic)"
                        :show-error="true"
                        :error-icon="require('@/assets/err.jpg')"
                        class="img"
                    />
                </div>
                <div class="promise" v-else>
                    <h4>收款人身份证照片</h4>
                    <p class="tis">上传的身份证照片如有模糊、遮挡、边框缺失，审核将不予通过</p>
                    <uploader type="receiver" @setimg="setimg" :length="1" />
                    <!-- <van-uploader v-model="idimg" :before-read="beforeRead" :max-count="1" /> -->
                    <!-- <div v-if="activeName =='mate'">
                        <h4 class="br1">收款人与患者结婚证照片（最多2张）</h4>
                        <p class="tis">上传的结婚证照片应完整显示双方姓名和身份证号，如有模糊、遮挡、边框缺失，审核将不予通过</p>
                        <van-uploader v-model="marryimg" :before-read="beforeRead" :max-count="2" />
                    </div>
                    <div v-if="activeName =='kinsfolk'">
                        <h4 class="br1">收款人与患者户口本照片（最多3张）</h4>
                        <p class="tis">上传的户口本照片须保证包含两人户口本页，且须保证两人户号相同，如有模糊、遮挡、边框缺失，审核将不予通过</p>
                        <van-uploader
                            v-model="registeredimg"
                            :before-read="beforeRead"
                            :max-count="3"
                        />
                    </div>-->
                </div>
            </div>
        </section>
        <footer class="footer">
            <van-button
                type="primary"
                round
                color="linear-gradient(to right, #ff3c3c, #ff5e10)"
                size="large"
                @click="submit"
            >保存</van-button>
        </footer>
    </div>
</template>

<script>
import {
    Cell,
    CellGroup,
    Field,
    Button,
    Toast,
    Tab,
    Tabs,
    Popup,
    Picker,
    ImagePreview,
    Image
} from "vant";
import { setInformShoukuanren, getInformShoukuanren } from "@/api/api";
import uploader from "@/components/uploader";
export default {
    name: "Ppayee",
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Button.name]: Button,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        [Popup.name]: Popup,
        [Picker.name]: Picker,
        [Image.name]: Image,
        uploader
    },
    created() {
        if (this.$route.path == "/DetailPpayee") {
            this.again = true;
            getInformShoukuanren({ prepare_id: this.$route.query.id }).then(
                res => {
                    if (res.code && res.results) {
                        this.disabled = true;
                        let data = res.results;
                        this.bank = data.bank_no;
                        this.banktype = data.bank_open;
                        this.bankOpenSub = data.bank_open_sub;
                        this.name = data.bank_username;
                        this.phone = data.receiveuser_phone;
                        this.id = data.bank_userno;
                        this.activeName = data.relation;
                        this.bank_usercardpic = data.bank_usercardpic;
                    }
                }
            );
        }
    },
    data() {
        return {
            activeName: "self",
            name: "",
            id: "",
            bank: "",
            banktype: "",
            phone: "",
            idimg: [],
            marryimg: [],
            registeredimg: [],
            columns: [
                "中国工商银行",
                "中国农业银行",
                "中国银行",
                "中国建设银行",
                "兴业银行",
                "光大银行",
                "浦发银行",
                "平安银行",
                "上海银行",
                "民生银行",
                "华夏银行",
                "北京银行",
                "银行浙商",
                "恒丰银行",
                "渤海银行",
                "中信银行",
                "招商银行",
                "邮政银行"
            ],
            showPicker: false,
            bankOpenSub: "",
            bank_usercardpic: "",
            again: false,
            disabled: false
        };
    },
    methods: {
        setimg(img) {
            this.idimg.push(img);
        },
        imgshow(img) {
            let arr = [];
            arr.push(img);
            ImagePreview({
                closeable: true,
                closeOnPopstate: true,
                images: arr
            });
        },
        submit() {
            if (this.disabled) {
                this.$router.push({
                    path: "/DetailInfo",
                    query: { id: this.$route.query.id }
                });
                return false;
            }
            let reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            let pattern = /^.{6,}$/;
            let tel = /^1[3456789]\d{9}$/;
            if (this.name == "") {
                Toast("请输入收款人姓名");
                return false;
            }
            if (reg.test(this.id) === false) {
                Toast("请正确输入患者身份证号");
                return false;
            }
            if (pattern.test(this.bank) === false) {
                Toast("请正确输入银行卡号");
                return false;
            }
            if (this.banktype == "") {
                Toast("请选择开户银行");
                return false;
            }
            if (this.bankOpenSub == "") {
                Toast("请填写支行名称");
                return false;
            }
            if (tel.test(this.phone) === false) {
                Toast("请正确输入手机号");
                return false;
            }
            if (this.idimg.length < 1) {
                Toast("请上传收款人身份证照片");
                return false;
            }
            if (this.activeName != "self") {
                // if (this.activeName == "mate") {
                //     if (this.marryimg.length < 1) {
                //         Toast("收款人与患者结婚证照片");
                //         return false;
                //     }
                // }
                // if (this.activeName == "kinsfolk") {
                //     if (this.registeredimg.length < 1) {
                //         Toast("收款人与患者户口本照片");
                //         return false;
                //     }
                // }
            }
            let relation;
            if (this.activeName == "self") {
                relation = "自己";
            }
            if (this.activeName == "mate") {
                relation = "配偶";
            }
            if (this.activeName == "kinsfolk") {
                relation = "亲属";
            }
            setInformShoukuanren({
                prepare_id: this.$route.query.id,
                bank_no: this.bank,
                bank_open: this.banktype,
                bank_open_sub: this.bankOpenSub,
                relation: relation,
                bank_username: this.name,
                bank_userno: this.id,
                receiveuser_phone: this.phone,
                images: this.idimg.join(",")
            }).then(res => {
                if (res.code) {
                    Toast("成功");
                    if (this.again) {
                        this.$router.push({
                            path: "/DetailInfo",
                            query: { id: this.$route.query.id }
                        });
                    } else {
                        this.$router.push({
                            path: "/ConfirmedInfo",
                            query: { id: this.$route.query.id }
                        });
                    }
                }
            });
        },
        onConfirm(value) {
            this.banktype = value;
            this.showPicker = false;
        }
    }
};
</script>

<style scoped>
.form {
    margin-bottom: 66px;
}
.text {
    margin-bottom: 0.83rem;
    font-size: 0.78rem;
    color: #999;
}
.promise h4 {
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 0.83rem;
}
.promise p.tis {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.32);
    line-height: 20px;
    margin-bottom: 0.83rem;
}
.br1 {
    border-top: 0.05rem solid rgba(0, 0, 0, 0.04);
    margin-top: 0.89rem;
    padding-top: 0.83rem;
}
</style>